import { PlusOutlined } from '@ant-design/icons';
import React, { useState, useCallback, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import {
    Button,
    Cascader,
    Checkbox,
    Form,
    Input,
    InputNumber,
    Select,
    Switch,
    Upload,
    TreeSelect,
} from 'antd';
import request from '../../../api/request';

const { TextArea } = Input;

const normFile = (e: any) => {
    if (Array.isArray(e)) {
        return e;
    }
    console.log(e.fileList);
    return e?.fileList;
};

// 树形选择
const { SHOW_PARENT } = TreeSelect;
const treeData = [
    {
        title: '肝功能',
        value: '肝功能',
    },
    {
        title: '肾功能',
        value: '肾功能',
    },
    {
        title: '心脏病',
        value: '心脏病',
    },
];

interface Props {
    getTabData: () => void;
}

const Addform: React.FC<Props> = (props: Props) => {
    const navigate = useNavigate();

    const [componentDisabled, setComponentDisabled] = useState<boolean>(true);
    const [value, setValue] = useState<string[]>(['']);

    const onChange = (newValue: string[]) => {
        console.log('onChange ', value);
        setValue(newValue);
    };

    const tProps = {
        treeData,
        onChange,
        value,
        treeCheckable: true,
        showCheckedStrategy: SHOW_PARENT,
        placeholder: '请选择医生标签',
        style: {
            width: '100%',
        },
    };

    // 存储上传的file
    const fileref = useRef<any>();
    const onChangeupload = (info: any) => {
        fileref.current = info.file;
        console.log('fileref.current', fileref.current);
    };

    const onFinish = async (values: any) => {
        // 打印表单数据
        console.log(values);

        // 在这里可执行提交逻辑，如发起网络请求等
        const formdata = new FormData();
        // formdata设置数据
        for (const key in values) {
            if (key == 'img') {
                formdata.append(key, fileref.current);
                continue;
            }
            if (key == 'department') {
                formdata.set(key, values[key]);
            }
            formdata.set(key, values[key]);
        }

        // 修改为派发任务将formdata作为参数携带发送请求
        const updata = await request.post('/api/doctor/add', formdata);
        navigate('/Hospitalmsg/Doctor');
        props.getTabData();
        console.log(updata);
    };


    const cancel = useCallback(() => {
        navigate('/Hospitalmsg/Doctor');
    }, [navigate]);

    return (
        <>
            <Checkbox
                checked={componentDisabled}
                onChange={(e) => setComponentDisabled(e.target.checked)}
            >
                编辑信息
            </Checkbox>
            <Form
                onFinish={onFinish}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 10 }}
                layout="horizontal"
                labelWrap
                disabled={componentDisabled}
            >
                <Form.Item
                    label="医生姓名"
                    name="name"
                    rules={[{ required: true, message: '请输入医生姓名' }]}
                >
                    <Input placeholder="请输入医生姓名" />
                </Form.Item>

                <Form.Item
                    label="上传照片"
                    valuePropName="fileList"
                    name="img"
                    rules={[{ required: true, message: '请上传照片' }]}
                    getValueFromEvent={normFile}
                >
                    <Upload
                        onChange={onChangeupload}
                        action="/upload.do"
                        listType="picture-card"
                        beforeUpload={() => false}
                    >
                        <div>
                            <PlusOutlined />
                            <div style={{ marginTop: 8 }}>点击上传</div>
                        </div>
                    </Upload>
                </Form.Item>

                <Form.Item
                    label="所属院区"
                    name="adress"
                    rules={[{ required: true, message: '请选择所属院区' }]}
                >
                    <Select placeholder="请选择所属院区" allowClear>
                        <Select.Option value="东院区">东院区</Select.Option>
                        <Select.Option value="西院区">西院区</Select.Option>
                        <Select.Option value="湘西院区">湘西院区</Select.Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    label="所属科室"
                    name="department"
                    rules={[{ required: true, message: '请选择所属科室' }]}
                >
                    <Cascader
                        allowClear
                        placeholder="请选择所属科室"
                        options={[
                            {
                                value: '内科',
                                label: '内科',
                                children: [
                                    {
                                        value: '肾内科',
                                        label: '肾内科',
                                    },
                                    {
                                        value: '神经科',
                                        label: '神经科',
                                    },
                                ],
                            },
                            {
                                value: '外科',
                                label: '外科',
                                children: [
                                    {
                                        value: '牙科',
                                        label: '牙科',
                                    },
                                    {
                                        value: '皮肤科',
                                        label: '皮肤科',
                                    },
                                ],
                            },
                        ]}
                    />
                </Form.Item>

                <Form.Item
                    label="医生职称"
                    name="doctor"
                    rules={[{ required: true, message: '请选择医生职称' }]}
                >
                    <Select placeholder="请选择医生职称" allowClear>
                        <Select.Option value="主任医师">主任医师</Select.Option>
                        <Select.Option value="副主任医师">
                            副主任医师
                        </Select.Option>
                        <Select.Option value="主治医师">主治医师</Select.Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    label="医生标签"
                    name="tags"
                    rules={[{ required: true, message: '请选择医生标签' }]}
                >
                    <TreeSelect {...tProps} />
                </Form.Item>

                <Form.Item
                    label="挂号费"
                    name="registrationfee"
                    rules={[{ required: true, message: '请输入挂号费' }]}
                >
                    <InputNumber />
                </Form.Item>
                <Form.Item
                    label="诊查费"
                    name="examinationfee"
                    rules={[{ required: true, message: '请输入诊查费' }]}
                >
                    <InputNumber />
                </Form.Item>

                <Form.Item label="医生简介" name="introduction">
                    <TextArea rows={4} />
                </Form.Item>

                <Form.Item
                    label="医生状态"
                    valuePropName="checked"
                    name="status"
                >
                    <Switch />
                </Form.Item>

                <Form.Item style={{ marginLeft: '400px' }}>
                    <Button
                        type="primary"
                        htmlType="submit"
                        style={{ width: '100px', height: '40px' }}
                    >
                        保存
                    </Button>

                    <Button
                        style={{
                            marginLeft: '50px',
                            width: '100px',
                            height: '40px',
                        }}
                        onClick={cancel}
                    >
                        取消
                    </Button>
                </Form.Item>
            </Form>
        </>
    );
};

export default Addform;
